<template>
	<view v-if="props.list && props.list.length > 0" class="order-list">
		<view class="order" v-for="(item, index) in props.list" :key="index">
			<view class="order-header">
				<view class="flex-fill font-size-medium">{{ item.name }}</view>
				<view class="status">
					<view>{{ item.goodsMenuTypeNames }}</view>
					<image src="/static/images/common/black_arrow_right.png"></image>
				</view>
			</view>
			<scroll-view scroll-x>
				<view class="images">
					<image class="radius" :src="item.coverUrl"></image>
				</view>
			</scroll-view>
			<view class="info">
				<view class="left">
					<view>所属食堂：{{ item.shopName }}</view>
					<view>菜品金额：￥{{ item.price }}</view>
					<view v-if="item.weight>0">菜品重量：{{ item.weight }}g</view>
					<view>菜品描述：{{ item.description?item.description:item.remark }}</view>
				</view>
				<view class="right">
					<button @click.stop="handleSelect(item,1)" class=" cu-btn bg-menu" plain
						hover-class="none">修改</button>
					<button @click.stop="handleSelect(item,2)" class=" cu-btn bg-menu margin-left-sm" plain
						hover-class="none">{{item.shelves?'下架':'上架'}}</button>

				</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [
					{
						"id": 75,
						"goodsId": 96,
						"goodsSourceId": null,
						"name": "凉面",
						"shopId": 9,
						"shopName": "清源食堂",
						"goodsMenuTypeId": 13,
						"goodsMenuTypeName": "主食",
						"coverUrl": "https://www.shuimuqingyuan.cn/img/2023-06-11/67bf8abf9b50482ba699153ea2a4f53c.jpg",
						"price": "4.00",
						"foodPrice": "0.00",
						"processPrice": "0.00",
						"weight": 0,
						"remark": "",
						"goodsTypeName": "主食",
						"shelves": true,
						"sort": 1,
						"goodsList": null,
						description: ''
					}
				];
			}
		}
	});
	const handleSelect = (e : any, type : any) => {
		emit('action', e, type);
	};
</script>

<style lang="scss" scoped>
	.order-list {
		display: flex;
		width: 100%;
		flex-direction: column;

		.order {
			background-color: $bg-color-white;
			padding: 30rpx 40rpx;
			margin-bottom: 18rpx;

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.status {
					font-size: $font-size-base;
					color: $text-color-grey;
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: $spacing-row-sm;
					}
				}
			}

			.images {
				display: flex;
				padding: 30rpx 0;

				image {
					flex-shrink: 0;
					width: 150rpx;
					height: 112.5rpx;
				}
			}

			.info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					font-size: $font-size-base;
					color: $text-color-grey;
				}

				.right {
					font-size: $font-size-lg;
					color: $text-color-base;
				}
			}

			.action {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				button {
					margin-left: 30rpx;
					font-size: $font-size-sm;
				}
			}
		}
	}
</style>